import React, { useState, useEffect } from 'react';
import { request } from 'umi';
// import requests from 'umi-request';
import styles from './index.less';
import {
  Table,
  message,
  Space,
  Button,
  Modal,
  Input,
  Form,
  Select,
  Popconfirm,
} from 'antd';
// 接口类型
import { Grade, Room } from '../../../utils/interface';

const Class: React.FC = () => {
  // 接口总数据
  let [list, setList] = useState<Grade[]>([]);
  let [lists, setLists] = useState<Room[]>([]);
  // 点击修改
  let [keys, setKey] = useState('');
  let [keyss, setKeys] = useState('');
  useEffect(() => {
    // 所有班级
    request('/manger/grade').then((res) => {
      setList(res.data);
    });
    // 所有教室
    request('/manger/room').then((res) => {
      setLists(res.data);
    });
    // 获取所有没有分配教室的班级
    request('/manger/grade/new').then(res => {
      console.log(res)
    })
  }, []);
  // 弹框显示隐藏
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isModalVisibles, setIsModalVisibles] = useState(false);
  const data = list.map((item, index) => {
    return {
      key: index,
      grade_id: item.grade_id,
      grade_name: item.grade_name,
      room_id: item.room_id,
      room_text: item.room_text,
      subject_id: item.subject_id,
      subject_text: item.subject_text,
      color: '#000',
    };
  });
  const columns = [
    {
      title: '班级名',
      dataIndex: 'grade_name',
      key: 'grade',
      render: (text: string, color: any) => <a style={color}>{text}</a>,
    },
    {
      title: '课程名',
      dataIndex: 'subject_text',
      key: 'subject_id',
    },
    {
      title: '教室号',
      dataIndex: 'room_text',
      key: 'room_id',
    },
    {
      title: '操作',
      key: 'grade_id',
      render: (key: number) => (
        <Space size="middle">
          <a onClick={() => { showModals(key); }} >修改 </a>|
          <Popconfirm title="确定删除吗？" okText="Yes" cancelText="No" onConfirm={() => { deletes(key); }}>
            <a href="#"> 删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  // 点击删除
  function deletes(key: any) {
    request('/manger/grade/delete', {
      method: 'DELETE',
      data: { grade_id: key.grade_id },
    }).then((res) => {
      console.log(res);
      // 重新渲染所有班级
      request('/manger/grade').then((res) => {
        setList(res.data);
      });
    });
  }
  // 点击弹框显示隐藏:添加、修改
  const showModal = () => {
    setIsModalVisible(true);
  };
  const showModals = (key: any) => {
    setIsModalVisibles(true);
    setKey(key.grade_id);
    setKeys(key.grade_name);
  };
  const handleOk = () => {
    setIsModalVisible(false);
    setIsModalVisibles(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
    setIsModalVisibles(false);
  };
  // 表单受控组件
  const { Option } = Select;
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };
  const Demo = () => {
    const [form] = Form.useForm();
    // 弹框内点击确定
    const onFinish = (values: Grade) => {
      // console.log(values);
      // 添加班级接口
      request('/manger/grade', { method: 'POST', data: { ...values } }).then(
        (res) => {
          // 判断如果code为0的话提示错误,否则push进数据里
          if (res.code === -1) {
            message.error(res.msg);
          } else {
            list.push(res);
            // 重新渲染所有班级
            request('/manger/grade').then((res) => {
              setList(res.data);
            });
          }
        },
      );
      // 关闭弹框
      setIsModalVisible(false);
    };
    // 弹框内点击取消
    const onReset = () => {
      setIsModalVisible(false);
    };
    return (
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item name="grade_name" label="班级名">
          <Input />
        </Form.Item>
        <Form.Item name="room_id" label="教室号">
          <Select placeholder="请选择教室号" allowClear>
            {lists.map((item, index) => {
              return (
                <Option key={index} value={item.room_id}>
                  {item.room_text}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item name="subject_id" label="课程名">
          <Select placeholder="请选择课程名" allowClear>
            {list.map((item, index) => {
              return (
                <Option key={index} value={item.subject_id}>
                  {item.subject_text}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button htmlType="button" onClick={onReset}>
            取消
          </Button>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    );
  };
  const Demos = () => {
    const [form] = Form.useForm();
    // 弹框内点击确定
    const onFinish = (values: any) => {
      // 修改更新接口
      request('/manger/grade/update', {
        method: 'PUT',
        data: {
          grade_id: keys,
          grade_name: keyss,
          subject_id: values.subject_id,
          room_id: values.room_id,
        },
      }).then((res) => {
        console.log(res);
        if (res.code === 1) {
          // 重新渲染所有班级
          request('/manger/grade').then((res) => {
            setList(res.data);
          });
          // 关闭弹框
          setIsModalVisibles(false);
        } else {
          message.error(res.msg);
        }
      });
    };
    // 弹框内点击取消
    const onReset = () => {
      setIsModalVisible(false);
    };
    return (
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item name="grade_name" label="班级名" initialValue={keyss}>
          <Input disabled />
        </Form.Item>
        <Form.Item name="room_id" label="教室号">
          <Select placeholder="请选择教室号" allowClear>
            {lists.map((item, index) => {
              return (
                <Option key={index} value={item.room_id}>
                  {item.room_text}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item name="subject_id" label="课程名">
          <Select placeholder="请选择课程名" allowClear>
            {list.map((item, index) => {
              return (
                <Option key={index} value={item.subject_id}>
                  {item.subject_text}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button htmlType="button" onClick={onReset}>
            取消
          </Button>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    );
  };
  // 渲染
  return (
    <div className={styles.grade}>
      <h2>班级管理</h2>
      <div className={styles.center}>
        <div className={styles.centers}>
          <div className={styles.button}>
            <Button type="primary" onClick={showModal}>
              + 添加班级
            </Button>
          </div>
          <div className="and-conter">
            <Table columns={columns} dataSource={data} pagination={false} />
            {/* 点击添加班级 */}
            <Modal
              title="添加班级"
              visible={isModalVisible}
              onOk={handleOk}
              onCancel={handleCancel}
              footer={false}
            >
              <Demo />
            </Modal>
            {/* 点击修改 */}
            <Modal
              title="请填入修改的内容"
              visible={isModalVisibles}
              onOk={handleOk}
              onCancel={handleCancel}
              footer={false}
            >
              <Demos />
            </Modal>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Class;
